<template>
  <px-dialog v-model="visible" title="综合分析报表" width="1600" fullscreen @close="cancel">
    <div class="content">
      <div ref="chartRef" class="chart-container" />
    </div>
    <template #footer>
      <span class="dialog-footer">
        <px-button type="primary" @click="cancel">关闭</px-button>
      </span>
    </template>
  </px-dialog>
</template>

<script setup>
import { ref, reactive, nextTick, toRefs, computed, onMounted } from "vue";
import * as echarts from "echarts";

const emits = defineEmits(["update:visible"]);
const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  data: {
    type: Array,
    default() {
      return [];
    }
  }
});

const visible = computed({
  get: () => props.visible,
  set: val => emits("update:visible", val)
});

const chartRef = ref(null);

onMounted(() => {
  nextTick(() => {
    drawChart();
  });
});

const cancel = () => {
  emits("update:visible", false);
};

const drawChart = () => {
  let myChart = echarts.init(chartRef.value);
  let data = props.data;
  let xData = [];
  let seriesData = [];
  data.map(item => {
    let valueList = [];
    item.valueList.map(v => {
      xData.push(v.name);
      valueList.push(v.num);
    });
    seriesData.push({
      name: item.itemName,
      type: "line",
      stack: "Total",
      data: valueList
    });
  });
  let option = {
    tooltip: {
      trigger: "item"
    },
    legend: {
      // type: "scroll",
      right: "100",
      data: data.map(v => v.itemName)
    },
    grid: {
      left: "3%",
      right: "4%",
      bottom: "3%",
      containLabel: true
    },
    toolbox: {
      feature: {
        saveAsImage: {}
      }
    },
    xAxis: {
      type: "category",
      boundaryGap: false,
      data: [...new Set(xData)]
    },
    yAxis: {
      type: "value"
    },
    series: seriesData
  };
  nextTick(() => {
    myChart.setOption(option);
  });
};
</script>

<style lang="scss" scoped>
.content {
  // width: 800px;
  height: 800px;
}

.chart-container {
  width: 100%;
  height: 100%;
}
</style>
